<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="index::head">
    <meta charset="UTF-8">
    <title>图书借取明细</title>
</head>
<style>

</style>

<body>
    <div th:replace="index::nav">

    </div>
    <div style="text-align: center;background-color: #4191C2;color: white;height: 150px;">
        <h1 style="padding: 50px">🧾我的在借图书</h1>
    </div>

    <div class="card text-center">
        <div class="card-body">
            <p class="card-text">
            <div class="table-responsive">
                <table class="table table-striped table-hover table-borderless table-primary align-middle">
                    <thead class="table-light">
                        <tr style="text-align: center;">
                            <th>ID</th>
                            <th>图书姓名</th>
                            <th>借阅时间</th>
                            <th>借阅状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="table-group-divider">
                        <tr th:each="book:${list}">
                            <td align="center" th:text="${book.id}"></td>
                            <td align="center" th:text="${book.bookName}"></td>
                            <td align="center" th:text="${book.borrowTime}"></td>
                            <td align="center" th:text="未归还"></td>
                            <td align="center">
                                <button class="btn btn-primary" th:data-book-name="${book.bookName}" onclick="returnBook(this)">还书</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            </p>
        </div>
    </div>

    <script>
        function returnBook(button) {
            var bookName = button.getAttribute('data-book-name');
            $.get('/records/returnBook', {
                bookName: bookName,
                username: localStorage.getItem('username')
            }, function (data) {
                if (data.code === '200') {
                    layer.msg('还书成功！');
                    window.location.reload();
                } else {
                    layer.msg(data.msg);
                }
            });
        }
    </script>
    



    <!-- 旧版 -->
    <!-- <table width="888" border="1">
        <tr>
            <th>ID</th>
            <th>图书姓名</th>
            <th>借阅时间</th>
            <th>借阅状态</th>
            <th>操作</th>
        </tr>
        <tr th:each="book:${list}">
            <td align="center" th:text="${book.id}"></td>
            <td align="center" th:text="${book.bookName}"></td>
            <td align="center" th:text="${book.borrowTime}"></td>
            <td align="center" th:text="未归还"></td>
            <td align="center"> <button><a
                        th:href="@{'~/records/returnBook?username='+${username}+'&bookName='+${book.bookName}}"
                        target="_blank">还书</a></button>
            </td>
        </tr>
    </table>
    <br> -->

</body>

</html>